<template>
  <div class="account-box" :style='{background: `rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, ${bgColor.a})`}'>
    <div class="account">
      <Split v-model="splitScale" :max='0.3' :min='0.3'>
        <div slot="left" class="split-pane">
            <Form :model="loginInfo" :rules="rules" ref='login'>
              <h3>LOGIN</h3> <br><br>
              <FormItem prop="username">
                <Input v-model="loginInfo.username" placeholder="username..." @on-focus='loginFocused' @on-enter="focus('loginPwd')"/>
              </FormItem>
              <FormItem prop="password">
                <Input v-model="loginInfo.password" type="password" placeholder="password..." @on-focus='loginFocused' ref='loginPwd' @on-enter="bll.login()"/>
              </FormItem>
              <Button type="primary" @click="bll.login()">Login</Button>
            </Form>
        </div>
        <div slot="right" class="split-pane">
          <Form :model="registerInfo" :rules="rules" ref='register'>
            <h3>REGISTER</h3> <br><br>
            <FormItem prop="username">
              <Input v-model="registerInfo.username" placeholder="username..." @on-focus='registerFocused' @on-enter="focus('registerPwd')"/>
            </FormItem>
            <FormItem prop="password">
              <Input v-model="registerInfo.password" type="password" placeholder="password..." ref='registerPwd' @on-focus='registerFocused'/>
            </FormItem>
            <Button type="primary" @click="bll.register()">Register</Button>
          </Form>
        </div>
      </Split>
    </div>
  </div>
</template>

<script>
import BLL from './bll'
export default {
  name: 'login',
  data () {
    return {
      splitScale: 0.5,
      targetScale: 0.5,
      bgColor: {
        r: 200,
        g: 200,
        b: 169,
        a: 0.5
      },
      loginInfo: {
        username: '',
        password: ''
      },
      registerInfo: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please fill in the user name', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'Please fill in the password.', trigger: 'blur' },
          { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    loginFocused () {
      this.targetScale = 0.7
      this.$refs.register.resetFields()
      this.TweenLite.to(this.bgColor, 0.5, {r: 69, g: 137, b: 148})
    },
    registerFocused () {
      this.targetScale = 0.3
      this.$refs.login.resetFields()
      this.TweenLite.to(this.bgColor, 0.5, {r: 114, g: 83, b: 52})
    },
    focus (refName) {
      this.$refs[refName].focus()
    }
  },
  watch: {
    targetScale (val) {
      this.TweenLite.to(this, 0.2, {splitScale: val})
    }
  },
  created () {
    this.bll = new BLL(this)
    this.TweenLite = window.TweenLite
  }
}
</script>

<style scoped lang='less'>
.account-box{
  height: 100%;
}
.account{
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  padding: 50px 50px;
  width: 800px;
  height: 300px;
  border: 1px solid #f0f0f0;
  background-color: rgba(250, 250, 250, .5);
  .split-pane{
    padding: 10px;
  }
}
</style>
